<link rel="stylesheet" type="text/css" href="<?php echo SEITCM_PLUGIN_URL.'assets/css/styles.css'; ?>"/>
<div id="camera" style='visibility: none;'>
    <div id="screen"></div>
    <div id="buttons">
    	<div class="buttonPane">
        	<a id="shootButton" href="" class="blueButton">Shoot!</a>
        </div>
        <div class="buttonPane hidden">
        	<a id="cancelButton" href="" class="blueButton">Cancel</a> <a id="uploadButton" href="" class="greenButton">Upload!</a>
        </div>
    </div>
    
    <span class="settings"></span>
</div>
<script type="text/javascript" src="<?php echo SEITCM_PLUGIN_URL?>assets/webcam/webcam.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	try {
		var camera = $('#camera'),
		screen =  $('#screen');

	/*----------------------------------
		Setting up the web camera
	----------------------------------*/


	webcam.set_swf_url('<?php echo SEITCM_PLUGIN_URL?>assets/webcam/webcam.swf');
	webcam.set_api_url('<?php echo SEITCM_INCLUDES_URL?>seitcm_camera_upload.php');	// The upload script
	webcam.set_quality(100);				// JPEG Photo Quality
	webcam.set_shutter_sound(true, '<?php echo SEITCM_PLUGIN_URL?>assets/webcam/shutter.mp3');

	// Generating the embed code and adding it to the page:	
	screen.html(
		webcam.get_html(screen.width(), screen.height())
	);


	/*----------------------------------
		Binding event listeners
	----------------------------------*/


	var shootEnabled = false;
		
	$('#shootButton').click(function(){
		
		if(!shootEnabled){
			return false;
		}
		
		webcam.freeze();
		togglePane();
		return false;
	});
	
	$('#cancelButton').click(function(){
		webcam.reset();
		togglePane();
		return false;
	});
	
	$('#uploadButton').click(function(){
		webcam.upload();
		webcam.reset();
		togglePane();
		return false;
	});

	camera.find('.settings').click(function(){
		if(!shootEnabled){
			return false;
		}
		
		webcam.configure('camera');
	});


	/*---------------------- 
		Callbacks
	----------------------*/
	
	
	webcam.set_hook('onLoad',function(){
		// When the flash loads, enable
		// the Shoot and settings buttons:
		shootEnabled = true;
	});
	
	webcam.set_hook('onComplete', function(msg){
		
		// This response is returned by upload.php
		// and it holds the name of the image in a
		// JSON object format:
		
		msg = $.parseJSON(msg);
		
		if(msg.error){
			alert(msg.message);
		}
		else {
			$('.seitcm_coverpreview').html('<img src="<?php echo SEITCM_UPLOAD_URL?>'+msg.filename+'" alt="" />');
			$('input[name="seitcm_user_cover"]').val(msg.filename);
			$('#cameraloader').dialog( "close" );
		}
	});
	
	webcam.set_hook('onError',function(e){
		screen.html(e);
	});
	
	
	/*-------------------------------------
		Populating the page with images
	-------------------------------------*/

	// This function toggles the two
	// .buttonPane divs into visibility:
	
	function togglePane(){
		var visible = $('#camera .buttonPane:visible:first');
		var hidden = $('#camera .buttonPane:hidden:first');
		
		visible.fadeOut('fast',function(){
			hidden.show();
		});
	}
	
	} catch (e) {
		// TODO: handle exception
	}
	
});
</script>